<template>
  <div class="dwt_ship" :style="shipStyle">
    <div class="ship_head" :style="{ width: shipHeadWidth + 'px' }">
      <div class="head_appearance"></div>
    </div>
    <div class="ship_body" :style="{ width: shipBodyWidth + 'px' }">
      <div class="body_appearance">
        <div class="body_tag"></div>
        <div class="body_text" :style="{ backgroundColor: shipOverLoad ? '#ADC5FF' : '#FFF'}">
          <span>{{ this.ship.cmch }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Ship",

  props: ['ship', 'zoomRatio'],

  data() {
    return {
      shipStyle: {},
      shipHeadWidth: 0,
      shipBodyWidth: 0,
      shipOverLoad: false,
    };
  },

  mounted() {
    console.log(this.ship,'ship')
    let styleObj = {
      width: `${this.ship.zdcc * this.zoomRatio}px`,
      height: `${this.ship.zdck * this.zoomRatio}px`,
      left: `${this.ship.zsConfig.left * this.zoomRatio}px`
    }

    if (this.ship.zsConfig.isInner) {
      styleObj.top = `${this.ship.zsConfig.top * this.zoomRatio}px`
    } else {
      styleObj.bottom = `${this.ship.zsConfig.bottom * this.zoomRatio}px`
    }

    this.shipHeadWidth = this.ship.zdck * this.zoomRatio;
    this.shipBodyWidth = this.ship.zdcc * this.zoomRatio - this.shipHeadWidth;
    this.shipOverLoad = this.ship.kzz == 1 ? false : true;

    this.shipStyle = styleObj;
  }
};
</script>

<style scoped>
.dwt_ship {
  position: absolute;

}

.ship_head {
  display: inline-block;
  height: 100%;
  background-color: rgb(0, 136, 195);
  clip-path: ellipse(100% 50% at 100% 50%);
  position: relative;
}

.head_appearance {
  display: inline-block;
  width: 90%;
  height: 90%;
  background-color: rgb(15, 151, 198);
  clip-path: ellipse(100% 50% at 100% 50%);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.head_appearance:before {
  position: absolute;
  content: '';
  width: 10%;
  height: 10%;
  background-color: #fff;
  border-radius: 50%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}

.head_appearance:after {
  position: absolute;
  content: '';
  width: 10%;
  height: 10%;
  background-color: #fff;
  border-radius: 50%;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
}

.ship_body {
  display: inline-block;
  height: 100%;
  background-color: rgb(0, 136, 195);
  position: relative;
}

.body_appearance {
  width: 98%;
  height: 90%;
  background-color: rgb(15, 151, 198);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: 1rem;
}

.body_tag {
  width: 3%;
  height: 60%;
  background-color: rgb(5, 81, 255);
}

.body_text {
  width: 90%;
  height: 90%;
  background-color: #fff;
  border: 2px solid rgb(0, 53, 184);

  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bold;
}

</style>
